
var Content=React.createClass({
	mixins:[UploadCDN()],
	getInitialState:function(){
		var contentData=this.props.options.contentData || {};

		return {
			name:contentData.name,
			email:contentData.email,
			new_password:'',
			old_password:'',
			password_repeat:'',
			profile_image:'',
			profile_image_temp:contentData.profile_image,
			isChangePassword:false,
			errorList:[],
			isLoading:false,
			message:null,
			profile_image_type:null,
			key:null
		}
	},
	inputValue:function(e){
		var state={},
			key=e.target.name,
			val=e.target.value;

		state[key]=val;

		this.setState(state)
	},
	addLoading:function(){
		this.setState({
			isLoading:true
		})
	},
	removeLoading:function(state){
		this.setState(_.extend({
			isLoading:false
		},state))
	},
	submit:function(){
		var self=this,
			wrapper=this.props.options.wrapper,
			state=this.state,
			type=state.profile_image_type;;

		if(state.isLoading){return}

		if(this.isValid()){
			this.addLoading();

			if(state.profile_image){
				if(state.key){
					submitAll(state.key,state.url)
				}else{
					this.getUploadParam(type,function(uploadParam){
						if(uploadParam){
							self.uploadCDN(state.profile_image,uploadParam,function(){
								self.setState({
									key:uploadParam.key,
									url:uploadParam.url
								});
								submitAll(uploadParam.key,uploadParam.url)
							})
						}else{
							self.removeLoading({
								success:false,
								message: i18next.t('personal_information.upload_failure')
							})
						}
					})
				}
			}else{
				submitAll()
			}

			function submitAll(image_key,image_url){
				$.ajax({
					type:'post',
					url:'/settings/profile',
					dataType:'json',
					data:{
						name:state.name,
						email:state.email,
						new_password:state.new_password,
						old_password:state.old_password,
						profile_image:image_key || ''
					},
					success:function(data){
						self.removeLoading({
							message:{
								success:data && data.success,
								message:data.error || i18next.t('personal_information.change.modify_success'),
							},
							new_password:'',
							old_password:'',
							password_repeat:'',
							profile_image:''
						});

						if(data.data){
							wrapper.setState({
								userAccount:_.extend(wrapper.state.userAccount,{
									name: state.name,
									src: image_url || wrapper.state.userAccount.src
								})
							})
						}
					},
					error:function(){
						self.removeLoading({
							message:{
								success:false,
								message: i18next.t('personal_information.change.modify_failure')
							}
						})
					}
				})
			}
		}
	},
	isValid:function(e){
		var state = this.state,
			err = [],
			key = e ? e.target.name : null;

		if(!state.name){
			err.push({
				info: i18next.t('personal_information.name_cannot_empty'),
				target:'name'
			})
		}
		if(!state.email){
			err.push({
				info: i18next.t('personal_information.email_cannot_empty'),
				target:'email'
			})
		}
		if(state.isChangePassword){
			if(!state.old_password){
				err.push({
					info: i18next.t('personal_information.change.old_password_empty'),
					target:'old_password'
				})
			}
			if(!state.new_password) {
				err.push({
					info: i18next.t('personal_information.change.new_password_empty'),
					target:'new_password'
				})
			}
			else if(state.new_password==state.old_password){
				err.push({
					info: i18next.t('personal_information.change.old_password_new_password_identical'),
					target:'new_password'
				})
			}
			if(state.new_password!=state.password_repeat){
				err.push({
					info: i18next.t('personal_information.change.inconsistent'),
					target:'password_repeat'
				})
			}
		}

		if(err.length){
			if(key){
				err=_.filter(err,function(i){
					return i.target==key
				})
			}

			this.setState({
				errorList:err,
				message:null
			});
			return false
		}else{
			this.setState({
				errorList:[],
				message:null
			});
			return true
		}
	},
	passwordAction:function(){
		this.setState({
			isChangePassword:!this.state.isChangePassword
		})
	},
	renderErrorInfo:function(key){
		var state=this.state,
			errorList=_.groupBy(state.errorList,'target'),
			error=errorList[key];

		if(error){
			return _.map(error,function(i){
				return <span className="help-block">{i.info}</span>
			})
		}else{
			return ''
		}
	},
	changeHeadortrait:function(e){
        var self = this,
        	reader=new FileReader(),
			file=e.target.files[0],
			type=file.type.split('/'),
			isTypeValid=this.validFileType(type[1],['jpg','png','jpeg']);
		
		if(isTypeValid){
			reader.onload=function(){
				self.setState({
					profile_image:file,
					profile_image_temp:this.result,
					profile_image_type:type[1],
					key:null
				})
			}
			reader.readAsDataURL(e.target.files[0])
		}else{
			this.setState({
				message:{
					success:false,
					message: i18next.t('personal_information.photo')
				}
			})
		}
        
    },
	render:function(){
		var state=this.state,
			message=state.message;

		return (
			<div className = "user-contentss divStyle">
                <div className = 'pull-left divFormSyle' >
                    
                    <div className={this.renderErrorInfo('name')?"form-group has-error":"form-group"}>
                        <label htmlFor="inputPassword1">{i18next.t('personal_information.name')}</label>
                        <input type="text" className="form-control formColor" id="inputPassword1" name="name" placeholder={i18next.t('personal_information.name')} value={state.name} onChange={this.inputValue} onBlur={this.isValid} />
                    	{this.renderErrorInfo('name')}
                    </div>
                    <div className={this.renderErrorInfo('email')?"form-group has-error":"form-group"}>
                        <label htmlFor="inputPassword2">{i18next.t('personal_information.email')}</label>
                        <input type="text" className="form-control formColor" id="inputPassword2" name="email" placeholder={i18next.t('personal_information.email')} value={state.email} onChange={this.inputValue} onBlur={this.isValid} />
                    	{this.renderErrorInfo('email')}
                    </div>

                    <div className=" formSitList dropdown">
	                    <h4>{i18next.t('personal_information.change.modify_password')}</h4>
	                    <p>{i18next.t('personal_information.password_prompt')}</p>
	                    <button type="button" className="btn sitting-btnStyle" onClick={this.passwordAction}>
	                        {i18next.t('personal_information.change.modify_password')}
	                    </button>
	                    {state.isChangePassword?<div className="userFormListAll">
	                        
                            <div className={this.renderErrorInfo('old_password')?"form-group has-error":"form-group"}>
                                <label htmlFor="inputPwd">{i18next.t('personal_information.change.old_password')}</label>
                                <input type="password" className="form-control formColor" minLength={6} id='inputPwd' name="old_password" placeholder={i18next.t('personal_information.change.password')} value={state.old_password} onChange={this.inputValue} onBlur={this.isValid} />
                            	{this.renderErrorInfo('old_password')}
                            </div>
                            <div className={this.renderErrorInfo('new_password')?"form-group has-error":"form-group"}>
                                <label htmlFor="inputPwd1">{i18next.t('personal_information.change.new_password')}</label>
                                <input type="password" className="form-control formColor" minLength={6} id='inputPwd1' name="new_password" placeholder={i18next.t('personal_information.change.mport_new_password')} value={state.new_password} onChange={this.inputValue} onBlur={this.isValid} />
                            	{this.renderErrorInfo('new_password')}
                            </div>
                            <div className={this.renderErrorInfo('password_repeat')?"form-group has-error":"form-group"}>
                                <label htmlFor="inputPwd2">{i18next.t('personal_information.change.confirm_password')}</label>
                                <input type="password" className="form-control formColor" minLength={6} id='inputPwd2' name="password_repeat" placeholder={i18next.t('personal_information.change.mport_old_password')} value={state.password_repeat} onChange={this.inputValue} onBlur={this.isValid} />
                            	{this.renderErrorInfo('password_repeat')}
                            </div>

							
	                        
	                    </div>:''}
	                </div>

					{message?<div className={message.success?"form-group has-success":"form-group has-error"}>
						<p className="help-block text-right">{message.message}</p>
					</div>:null}
                    
                    <div>
                        <button className={"btn buttonStyle "+(state.isLoading?"btn-default":"btn-primary")} type="submit" onClick={this.submit}>{state.isLoading? i18next.t('personal_information.saveing'): i18next.t('personal_information.save')}</button>
                    </div>
                </div>
                <div className = 'pull-left divImgStyle' >
                    <div className="weui_cell_hd headerImgDiv">

                        <div className="form-group photo_upload_box photo_upload_boxMargin">
                            <label htmlFor="uploadBackground" className = 'LableWH'>
                                <input id="uploadBackground" type="file" name="profile_image" onChange={this.changeHeadortrait} />
                                <div className="photo_upload imgDivStyle ">
                                    <div className="imgPosition" style={{backgroundImage : 'url('+state.profile_image_temp+')'}}></div>
                                </div>
                                <div className="changeBtn">
                                    <span>change</span>
                                    <span className="IconStyle glyphicon glyphicon-paperclip"></span>
                                </div>
                            </label>
                        </div>

                    </div>
                </div>
            </div>
		)
	}
})


